<template>
	<view class="content">
		<image src="../../static/fanhui.png" class="iconBack" @click="pageToBack"></image>
		<!-- <view class="name">E7社团</view>
		<view class="EnglishName">
			<text>E7 Cummunity</text>
		</view> -->
		<image src="https://img01-xusong.91q.com/267B1016-4BB6-49ED-9408-B6C8CC587F53.png" class="title1"></image>
		<view class="line"></view>
		<image src="https://img01-xusong.91q.com/DA463A8C-95D7-4DDB-8899-00946271AE1B.png" class="title2"></image>
		<view class="container"></view>
		<view class="aggrement">
			<text>在你使用本小程序前，请认真阅读并了解</text><text class="user" @click="toUserAgreement">《用户协议》</text><text>。点击授权登录即表示你已阅读并同意全部条款。</text>
		</view>
		<view>
			<image src="https://img01-xusong.91q.com/94AD66A5-0E47-46E7-9407-9958C44020BA.png" class="dog" ></image>
		</view>
		<!-- <navigator url="index" open-type="switchTab"> -->
		<view class="login" @click="weixinOauthByLogin()">
			<text class="log">授权登录</text>
			</view>
		</navigator>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				flag: false,
				data: {
					                        //发送的数据
				}
			}
		},
		onLoad() {},
		methods: {
			pageToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			...mapMutations(['login','checkYourInfor']),
			// 获取是否同意用户协议
			radioChange: function(evt) {
				this.msg = evt.detail.value
				this.flag = true
			},
			/**
			 * 微信授权登录
			 */
			weixinOauthByLogin() {
				if (this.flag == false) {
					/*弹窗*/
					this.login()
				} else {
					
				}
			},
			toUserAgreement(){
				uni.navigateTo({
					url:'./userAgreement',
				})
			}
		},
	}
</script>

<style>
	.title1{
		left: 108px;
		top: 113px;
		width: 159px;
		height: 48px;
		position: absolute;
	}
	.line{
		left: 109px;
		top: 177px;
		width: 150px;
		height: NaNpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		border: 1px solid rgba(255, 255, 255, 100);
		position: absolute;
	}
	.title2{
		left: 82px;
		top: 178px;
		width: 211px;
		height: 64px;
		position: absolute;
	}
	.iconBack {
		left: 36rpx;
		top: 98rpx;
		width: 48rpx;
		height: 48rpx;
		z-index: 50;
		position: absolute;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgb(230,188,123);
		background: linear-gradient(180deg, rgba(230,188,123,1) 0%, rgba(237,212,194,1) 50%, rgba(239,238,236,1) 100%);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.name {
		left: 230rpx;
		top: 180rpx;
		width: 480rpx;
		height: 104rpx;
		color: rgba(255, 255, 255, 100);
		font-size: 96rpx;
		text-align: left;
		font-family: ZKXiaoWeiLogo-regular;
		position: absolute;
	}

	.EnglishName {
		left: 140rpx;
		top: 340rpx;
		width: 600rpx;
		height: 76rpx;
		color: rgba(255, 255, 255, 100);
		font-size: 72rpx;
		text-align: left;
		font-family: ZKXiaoWeiLogo-regular;
		position: absolute;
	}

	.container {
		left: 74rpx;
		top: 716rpx;
		width: 604rpx; 
		height: 294rpx;
		line-height: 40rpx;
		border-radius: 46rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		border: 2rpx solid rgba(187, 187, 187, 100);
		position: absolute;
	}

	.aggrement {
		left: 116rpx;
		top: 820rpx;
		width: 520rpx;
		height: 134rpx;
		color: rgba(108, 108, 108, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-light;
		position: absolute;
	}

	.user {
		color: orange;
		z-index: 5;
	}
	.dog {
		left: 170rpx;
		top: 520rpx;
		width: 400rpx;
		height: 400rpx;
		border-radius: 150rpx;
		position: absolute;
	}
	.login{
		left: 204rpx;
		top: 1178rpx;
		width: 342rpx;
		height: 92rpx;
		line-height: 70rpx;
		border-radius: 24rpx;
		background-color: RGB(230,159,49);
		color: rgba(255, 255, 255, 100);
		font-size: 40rpx;
		text-align: center;
		box-shadow: 0rpx 22rpx 90rpx -22rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		position: absolute;
	}
	.log{
		top: 12rpx;
		left: 96rpx;
		position: absolute;
	}
</style>
